<template>
	<view>
		<view class="payTop u-f-column u-f-ac" :style="{'background-color':paycolor}">
			<view>
			</view>
			<view>
				￥{{ghf}}
			</view>
			<view>
				订单编号：{{ordernum}}
			</view>
		</view>
		<view class="uni-list">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd u-f u-f-jsb" v-for="(item, index) in items" :key="item.value">
					<view>
						<view class="paytp iconfont u-f-ac" :class="item.ifont" :style="{'color':item.colorpa}">
							<text>{{item.name}}</text>
						</view>
						<view class="payye" v-if="item.moye">
							{{item.moye}}
						</view>
					</view>
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
				</label>
			</radio-group>
		</view>
		<button class="paybtnzf" :style="{'background-color':paycolor}" @click="requestPayment()">立即支付￥{{ghf}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordernum:'',
				ghf:'',
				items: [
					{
						value: 'wx',
						name: '微信支付',
						checked: 'true',
						colorpa:"#44b549",
						ifont:"iconpayzf"
					}
					// ,{
					// 	value: 'ye',
					// 	name: '余额支付',
					// 	moye:'当前余额：520元',
					// 	ifont:"icontransaction_fill",
					// 	colorpa:"#e17503",
					// }
			
				],
				paycolor:"#44b549",
				current: 0,
			}
		},
		onLoad(event) {
			this.ordernum=event.id;
			this.ghf=event.ghf;
			if(event.tp){
				this.tp=event.tp;
			}else{
				this.tp=2;
			}
			
		},
		methods: {
			async requestPayment() {
			    let orderInfo = await this.getOrderInfo();
			    console.log("得到订单信息", orderInfo);
			    if (orderInfo.statusCode !== 200) {
			        console.log("获得订单信息失败", orderInfo);
			        uni.showModal({
			            content: "获得订单信息失败",
			            showCancel: false
			        })
			        return;
			    }
			    uni.requestPayment({
			        provider: 'wxpay',
			        orderInfo: orderInfo.data,
			        success: (e) => {
			            console.log("success", e);
			            uni.showModal({
							title: '',
							content: '支付成功！',
							showCancel: false,
							confirmText: "确定",
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack({
										delta:1
									})
								} else if (res.cancel) {
									
								}
							}
						});
			        },
			        fail: (e) => {
			            console.log("fail", e);
			            uni.showModal({
			                //content: "支付失败,原因为:2 " + e.errMsg,
							content: "支付失败!",
			                showCancel: false
			            })
			        },
			        complete: () => {
			            this.providerList[index].loading = false;
			        }
			    })
			},
			getOrderInfo() {
			    let appid = "";
			    // #ifdef APP-PLUS
			    appid = plus.runtime.appid;
			    // #endif
				//type 1充值（传uid） 2支付挂号费（订单id） 3支付药房费（订单id） 4支付商品（订单id）
				//let url = 'https://demo.dcloud.net.cn/payment/?payid=wxpay&appid=' + appid + '&total=' + this.ghf;
				let url = this.config.webUrl+'/apip/paywx/pay/?price=' + this.ghf+ '&type='+this.tp+'&oid=' +this.ordernum;
				
			    return new Promise((res) => {
			        uni.request({
			            url: url,
			            success: (result) => {
			                res(result);
			            },
			            fail: (e) => {
			                res(e);
			            }
			        })
			    })
			},
			
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						console.log(i)
						if(i==0){
							this.paycolor = "#44b549";
							uni.setNavigationBarColor({
								frontColor:"#ffffff",
								backgroundColor: "#44b549"
							})
						}else{
							this.paycolor = "#e17503";
							uni.setNavigationBarColor({
								frontColor:"#ffffff",
								backgroundColor: "#e17503"
							})
						}
						break;
					}
				}
			},
			onOkTap(){
				// if(this.current==0){
				// 	uni.redirectTo({
				// 		url: '/pages/money/paySuccess'
				// 	})
				// }else{
				// 	uni.redirectTo({
				// 		url: '/pages/money/paySuccess'
				// 	})
				// }
			}
		},
	}
</script>

<style>
	.paybtnzf{
		position: fixed;
		width: 90%;
		left: 5%;
		bottom: 30upx;
		border-radius: 60px;
		color: #fafafa!important;
	}
	.paytp{
		font-size: 58upx;
	}
	.paytp text{
		font-size: 32upx!important;
		color: #3a3a3a;
		font-weight: bold;
	}
	.payye{
		color: #FF4443;
		padding-left: 29px;
	}
	.payTop {
		padding-bottom: 30upx;
	}
	.payTop>view:first-child {
		color: #fff;
		font-size: 28upx;
		padding: 10upx 20upx;
		opacity: 0.8;
	}

	.payTop>view:nth-child(2) {
		color: #fff;
		font-weight: bold;
		font-size: 52upx;
		padding: 40upx 20upx;
	}

	.payTop>view:last-child {
		color: #fff;
		font-size: 28upx;
		padding: 6upx 60upx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 30px;
	}
</style>
